<template>
	<view class="contentPage">
		<view class="pageTitle">城市管理</view>
		<view class="searchBox df" @click="toSearch">
			<text class="iconfont icon-sousuo" style="font-size: 40rpx;"></text>
			<view class="searchTxt">搜索位置</view>
		</view>

		<view class="listContent">
			<view class="tagItem">当前定位</view>
			<view class="addressItem df" @click="toIndexPage">
				<view class="itemLeft">
					<view class="title">{{cityInfo.adm2}}-{{cityInfo.name}} <text class="iconfont icon-dingwei"
							style="font-size: 40rpx;"></text></view>
					<view class="">{{locationWeather.text}}</view>
				</view>
				<view class="itemRight">
					<view class="nowTemperature">{{locationWeather.temp}}°</view>
					<!-- <view class="allTemperature">{{weatherDetail.tempMax}}° / {{weatherDetail.tempMin}}°</view> -->
				</view>
			</view>
			<view v-if="addressList.length>0">
				<view class="tagItem" style="margin-top: 24rpx;">已添加城市</view>
				<view>
					<view class="addressItem df" v-for="(item,index) in addressList" :key=index>
						<view class="itemLeft">
							<view class="title">{{item.address}} <text class="iconfont icon-dingwei"
									style="font-size: 40rpx;"></text></view>
							<view class="">{{item.status}}</view>
						</view>
						<view class="itemRight">
							<view class="nowTemperature">{{item.nowTemperature}}</view>
							<view class="allTemperature">{{item.allTemperature}}</view>
						</view>
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, reactive, onBeforeMount } from 'vue'
	const locationWeather = ref({})
	const cityInfo = ref({})
	const weatherDetail = ref({})
	const addressList = reactive([
	])
	const toIndexPage = () => {
		uni.redirectTo({
			url: '/pages/index/index'
		})
	}
	// 获取本地信息
	onBeforeMount(() => {
		uni.getStorage({
			key: 'locationWeather',
			success(res) {
				locationWeather.value = JSON.parse(res.data);
			}
		})
		uni.getStorage({
			key: 'cityInfo',
			success(res) {
				cityInfo.value = JSON.parse(res.data);
			}
		})
		uni.getStorage({
			key: 'moreWeather',
			success(res) {
				const arr = JSON.parse(res.data);
				weatherDetail.value = arr[0];
			}
		})
	})
	const toSearch = () => {
		uni.navigateTo({
			url: '/pages/searchCity/searchCity'
		})
	}
</script>

<style scoped lang="scss">
	.contentPage {
		padding: 24rpx;

		.pageTitle {
			font-size: 64rpx;
			padding-left: 20rpx;
		}

		.searchBox {
			margin-top: 24rpx;
			width: 100%;
			align-items: center;
			background-color: #E8E8E8;
			border-radius: 50rpx;
			padding: 20rpx;
			box-sizing: border-box;
			color: #A8A8A8;

			.searchTxt {
				margin-left: 20rpx;
				font-size: 34rpx;
			}
		}

		.listContent {
			margin-top: 24rpx;

			.addressItem {
				border-radius: 20rpx;
				background-color: #6a6a6a;
				align-items: center;
				justify-content: space-between;
				padding: 24rpx;
				color: white;
				margin-top: 24rpx;

				.itemLeft {
					.title {
						font-size: 40rpx;
						padding-bottom: 30rpx;
					}
				}

				.itemRight {
					.nowTemperature {
						font-size: 60rpx;
						padding-bottom: 20rpx;
					}

					.allTemperature {
						font-size: 24rpx;
					}
				}
			}

			.tagItem {
				color: #A8A8A8;
				font-size: 26rpx;
			}
		}
	}
</style>